<!--
 * @Description: 
 * @version: 
 * @Author: mikeJang
 * @Date: 2021-07-01 14:10:39
 * @LastEditors: mikeJang
 * @LastEditTime: 2021-07-07 16:26:38
 * @FilePath: \YU_LIN_Frontend\src\components\SReachNameInput.vue
-->
<template>
  <a-input
    size="large"
    :value="value"
    allowClear
    :disabled="disabled"
    placeholder="请输入河段名称"
    @change="handelChange"
  >
  </a-input>
</template>

<script>

export default {
  name: "SReachNameInput",
  props: {
    value: {
      type: String,
      default: ""
    },
    adcd: {
      type: String,
      default: ""
    },
    riverId: {
      type: String,
      default: ""
    },
    riverList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      adnm: "",
      riverName: ""
    };
  },
  watch: {
    adcd: {
      async handler(val) {
        if (val) {
          const params = {
            adcds: val
          }
          this.$http.userauth.queryByAdcds().then(adcdres => {
              if (adcdres) {
                this.adnm = adcdres[0].adnm;
              }
            });
        } else {
          this.adnm = "";
        }
        this.$emit("input", this.joinNames);
      },
      immediate: true
    },
    riverId: {
      async handler(val) {
        if (val && this.riverList.length > 0) {
          await this.riverList.find(item => {
            if (item.value === val) {
              this.riverName = item.title;
            }
          });
        } else {
          this.riverName = "";
        }
        this.$emit("input", this.joinNames);
      },
      immediate: true
    }
  },
  computed: {
    joinNames() {
      return this.riverName + this.adnm + "段";
    }
  },
  methods: {
    handelChange(ev) {
      this.$emit("input", ev.target.value);
      this.$emit("input", ev.target.value);
    }
  }
};
</script>
